<template>
  <div class="classList">
    <div class="selectwrapper">
      <div class="select-title">
        <div class="img1wrapper">
          <img src="../../../static/img/logo-course.png" />
        </div>
        <div class="img2wrapper">
          <img src="../../../static/img/course-top.png" />
        </div>
      </div>
      <div class="select-container">
        <!-- degree -->
        <div class="degreewrapper">
          <div class="explain">等级:</div>
          <div class="classify" v-for="(item,index) in classdegree" :key="index"
          @click="chooseClass('classdegree',index)"
           :class="classLevel==index?'active':''">{{item}}</div>
        </div>
        <!-- kind -->
        <div class="degreewrapper">
          <div class="explain">分类:</div>
          <div class="classify" v-for="(item,index) in classkind" :key="index"
          @click="chooseClass('classkind',index)"
           :class="classType==index?'active':''">{{item}}</div>
        </div>
      </div>
    </div>
    <div class="classeswrapper">
      <div class="moco-classeswrapper" @click="goDetail($event)">
        <div
          v-for="(item,index) in classinfo"
          class="classwrapper"
          :key="index"
        >
          <div class="imgwrapper">
            <img :src="item.classImg" style="width:100%"
            :data-index="item.classNo" :data-people="item.people"/>
          </div>
          <div class="title">{{item.className}}</div>
          <div class="middle">
            <div class="degree">{{classdegree[item.classLevel]}}</div>
            <div class="people iconfont">&#xe6a9;&nbsp;{{item.people}}</div>
          </div>
          <div class="introduction">{{item.introduction}}</div>
        </div>
      </div>
      <br clear="all" />
    </div>
    <div class="fenye">
      <el-pagination
        :page-size="paginationOption.pageSize"
        layout="prev, pager, next"
        :page-count="paginationOption.total"
        :current-page.sync="paginationOption.currentPage"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'classList',
  data () {
    return {
      classinfo: [],
      classType: null,
      classLevel: null,
      classdegree: ['全部', '一级', '二级', '三级'],
      classkind: ['全部', '商务日语', '口语', '听力'],
      paginationOption:{
        pageSize: 0,
        total: 0,
        currentPage: 1
      }
    }
  },
  methods: {
    // 页码改变触发
    currentChange(e){
      let currentPage = e + 'p' + this.$route.query.page.split('p')[1]
      let get = this.$route.query.get
      console.log(e);
      this.$router.push({path: '/courseList', query: { get, level: this.classLevel, type: this.classType, page: currentPage }})
    },
    // 选择课程等级，分类,管理样式和路由
    chooseClass (str, index) {
      switch (str) {
        case 'classdegree':
          this.classLevel = index
          break
        case 'classkind':
          this.classType = index
          break
        default: break
      }
      var get = this.$route.query.get
      let page = '1p'+ this.$route.query.page.split('p')[1]
      this.$router.push({path: '/courseList', query: { get, level: this.classLevel, type: this.classType, page }})
    },
    // 跳到detail页面
    goDetail (event) {
      let classNo = event.target.dataset.index
      let people = event.target.dataset.people
      this.$router.push({path: '/courseDetail', query: {classNo, study: people}})
    },
    getClassListInfo (pageStart) {
      let getting = this.$route.query.get === 'free' ? '0' : '1'
      let url = 'getting=' + getting + '&level=' + this.$route.query.level + '&type=' + this.$route.query.type + '&page=' + pageStart
      console.log("axios的url:" +this.ports.classlist.findClass + url)
      
      axios.get(this.ports.classlist.findClass + url)
        .then(this.getClassListInfoSucc)
    },
    getClassListInfoSucc (result) {
      let res = result.data.result
      if (res.code && res.msg) {
        this.paginationOption.pageSize = parseInt(this.$route.query.page.split('p')[1])
        let result = Math.floor(res.count / this.paginationOption.pageSize)
        this.paginationOption.total = res.count % this.paginationOption.pageSize === 0 ? result : 1 + result
        this.paginationOption.currentPage = parseInt(this.$route.query.page.split('p')[0])
        this.classinfo = res.msg
      }
      console.log(this.paginationOption)
    },
  },
  mounted () {
    // 刷新时
    this.classLevel = this.$route.query.level
    this.classType = this.$route.query.type
    let pageStart = this.$route.query.page
    this.getClassListInfo(pageStart)
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': function () {
      this.classLevel = this.$route.query.level
      this.classType = this.$route.query.type
      let pageinfo = this.$route.query.page
      this.getClassListInfo(pageinfo)
    }
  }
}
</script>

<style lang="scss" scoped>
.borderR {
  border-radius: 8px;
}
.classList {
  width: 100%;
  height: auto;
  color: #9199a1;
}
.selectwrapper {
  height: auto;
  margin: 0.3rem auto;
  padding: 0 1rem 0.5rem;
  border-radius: 16px;
  box-shadow: 0 0 8px 0 rgba(7, 17, 27, 0.2);
}
.select-title {
  height: 1rem;
  border-bottom: 1px solid rgba(28, 31, 33, 0.3);
}
.select-title div:nth-child(1) {
  float: left;
  margin-right: 0.3rem;
  height: 100%;
  width: 1.82rem;
  position: relative;
  img {
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
.select-title div:nth-child(2) {
  float: left;
  margin-right: 0.3rem;
  height: 100%;
  width: 1.25rem;
  img {
    height: 100%;
  }
}
.degreewrapper {
  width: 100%;
  height: 1.1rem;
  display: flex;
  justify-content: flex-start;
  line-height: 0.5rem;
  border-bottom: 1px solid rgba(28, 31, 33, 0.1);
  font-size: 14px;
  color: #07111b;
}
.explain,
.classify {
  width: auto;
  height: 0.5rem;
  margin-top: 0.3rem;
  margin-right: 0.2rem;
}
.explain {
  font-weight: 700;
}
.classify {
  border-radius: 6px;
  padding: 0 0.2rem;
}
.classify.active {
  background: rgba(242, 13, 13, 0.06);
  color: #f20d0d;
  font-weight: 700;
}

.classify:hover,.classify.active {
  color: #f20d0d;
  background: rgba(242, 13, 13, 0.06);
  font-weight: 700;
}
.moco-classeswrapper {
  margin-left: -18px;
  overflow: hidden;
  float: left;
}
.classwrapper {
  width: 216px;
  margin-left: 18px;
  color: #93999f;
  font-size: 12px;
  float: left;
  margin-bottom: 0.3rem;
}
.classwrapper:hover .title{
  color: #f20d0d;
}
.classeswrapper {
  // height: 810px;
  margin: 0 auto;
  height: auto;
  // 固定三行展示，多余用分页
}
@media screen and (max-width: 1450px) {
  .classeswrapper {
    width: 1152px;
  }
  .selectwrapper {
    width: 1112px;
    padding: 0 20px;
  }
  .moco-classeswrapper {
    width: 1170px;
  }
}
@media screen and (min-width: 1450px) {
  .classeswrapper {
    width: 1386px;
  }
  .selectwrapper {
    width: 1386px;
  }
  .moco-classeswrapper {
    width: 1404px;
  }
}
.imgwrapper{
  width: 216px;
  height: 122px;
  cursor: pointer;
  background: #9199a1;
  border-radius: 8px;

  img{
    border-radius: 8px;
  }
}
.title {
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 14px;
  font-weight: 700;
  font-family: "微软雅黑";
  color: #1c1f21;
  padding: 0 0.1rem;
}
.classwrapper .middle {
  height: 0.35rem;
  line-height: 0.35rem;
  padding: 0 0.1rem;
}
.degree {
  float: left;
  width: auto;
  height: 100%;
}
.people {
  float: left;
  width: auto;
  height: 100%;
  margin-left: 0.2rem;
}
.introduction {
  padding: 0 0.1rem;
  margin-top: 0.1rem;
  text-align: justify;
  line-height: 20px;
  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 3; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}
.fenye {
  width: 6rem;
  height: 0.5rem;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  // outline: 1px solid red;
  font-size: 16px;
  margin-top: 0.3rem;
}
</style>
